<template>
  <div>
    <div class="flex tab-box">
      <template v-for="(item, index) in tabList">
        <div class="tab cursor-pointer margin-right-20" :key="index" @click="tabChange(item)">
          <span :class="item.type == currentTab ? 'active' : 'no-active'" class="padding-right-10">{{ item.lable }}</span>
          <span v-if="item.type == currentTab" :class="item.type == currentTab ? 'active-num' : 'no-active'">{{ item.num }}{{ item.nuit }}</span>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      tabList: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    watch: {
      tabList: {
        deep: true,
        immediate: true,
        handler(list) {
          this.currentTab = list[0].type;
        },
      },
    },

    data() {
      return {
        currentTab: '',
      };
    },

    methods: {
      //tab切换
      async tabChange(item) {
        this.currentTab = item.type;
        this.$emit('tabChange', item);
      },
    },

    created() {},
  };
</script>
<style scoped lang="scss">
  .tab-box {
    margin-top: -17px;
    .tab {
      // width: 106px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      padding: 0 5px;
    }
  }

  .active {
    font-size:18px;
    font-weight: 700;
    color: #333333;
  }
  .active-num{
    color: #333333;
  }
  .no-active {
    font-size:14px;
    color: #999999;
  }
</style>
